import "../static/card_css.css";
import {useEffect, useState} from "react";
import axios from "axios";
import {Comment, Divider, Layout, Tooltip} from "antd";
import {useParams} from "react-router-dom";


export default function Comments(props) {
    const [comments, setComments] = useState([]);
    let params = useParams();
    console.log("props:", params);
    useEffect(() => {
        console.log("进入到comments的Effect啦！");
        axios.get("/api/add-comments", {params: {card_id: params['card_id']}})
            .then(res => {
                let c = res['data'];
                console.log("CCC:", c);
                setComments(c);
            })
    }, [])

    return (
        <>
            <Divider plain>评论区</Divider>
            {comments.map((temp) => {
                let item = temp['fields'];
                return (
                    <>
                    <form className="card-comments">
                        <div className="card-body">
                            <Comment
                                author={<a>{item.user}</a>}
                                content={
                                    <p>
                                        {item.comment}
                                    </p>
                                }
                                datetime={item.created_time}
                            />
                        </div>
                    </form>
                        <Divider dashed/>
                    </>
                )
            })
            }
        </>
    )
}